<template>
  <view class="item-view">
    <view @tap="open" class="item-top">
      <view class="item-title">比赛编号：{{ itemData.matchStr }}</view>
      <view class="item-status" :class="`item-status-${itemData.matchStatus}`">{{ matchText[itemData.matchStatus] }}
      </view>
    </view>
    <view @tap="open" class="item-type">联赛：{{ itemData.leagueName }}</view>
    <view @tap="open" v-if="itemData.tcType" style="margin-top: 20rpx;">玩法：{{ tcTypeText[itemData.tcType] }}</view>
    <view @tap="open" class="item-content">
      <view v-if="itemData.recommendRatio">赔率：{{ itemData.recommendRatio }}</view>
      <view class="item-tag" v-if="type === 'ttg'">
        <text>投注建议：</text>
        <text :class="`item-tag`">{{itemData.recommendFlag}}球</text>
      </view>
      <view v-else class="item-tag">
        <text>投注建议：</text>
        <text :class="`item-tag item-tag-${itemData.recommendFlag}`">{{getRecommendText(itemData.recommendFlag)}}</text>
      </view>
    </view>
    <view @tap="open" class="item-content">
      <view v-if="itemData.diffRatio && typeToText[type] ">
        {{ typeToText[type] }}：
        {{ itemData.diffRatio }}
      </view>
      <view v-if="itemData.recommendMoney">投注金额：{{ itemData.recommendMoney }}</view>
    </view>
    <view @tap="open" style="margin-top: 20rpx;" class="item-time" v-if="itemData.startTime"><text>机会时间：</text>{{
      itemData.startTime }}</view>
    <view class="action-but" v-if="mode === 'plan'" style="margin-top: 20rpx;">
      <u-button @click="subMit" type="primary" text="处理"></u-button>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    mode: {
      type: String,
      default: ''
    },
    itemData: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      tcTypeText: {
        HDC: '让分胜负',
        HILO: '大小分'
      },
      recommendText: {
        H: "胜",
        D: "平",
        A: "负"
      },
      matchText: {
        U: '未处理',
        O: '已过期',
        P: '已处理'
      },
      typeToText: {
        had: '赔率差',
        ttg: '方案赔率',
        hilo: '盘口差',
      }
    }
  },
  methods: {
    open () {
      this.$emit('open', this.itemData)
    },
    getRecommendText (type) {
      let text = ''
      if (this.type === 'hilo') {
        switch (this.itemData.tcType) {
          case 'HDC':
            text = type === 'H' ? '胜' : '负'
            break
          case 'HILO':
            text = type === 'H' ? '大' : '小'
            break
          default:
            text = this.recommendText[type]
        }
      } else {
        text = this.recommendText[type]
      }
      return text
    },
    subMit () {

      this.$emit('subMit', this.itemData)
    }

  }

}
</script>
<style lang="less" scoped>
.item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-tag-H {
  color: #ff0000;
}

.item-tag-D {
  color: #999;
}

.item-tag-A {
  color: #3d8ce6;
}

.item-view {
  background-color: #fff;
  border-radius: 10rpx;
  margin: 30rpx 0;
  padding: 30rpx;

  .item-content {
    display: flex;
    margin-top: 20rpx;
    align-items: center;
    justify-content: space-between;

    .item-time {
      font-size: 24rpx;
      color: #999;
    }
  }

  .item-type {
    color: #3d8ce6;
  }

  .item-status {
    &.item-status-U {
      color: #3d8ce6;
    }

    &.item-status-O {
      color: #999;
    }

    &.item-status-P {
      color: #ff0000;
    }
  }

  .item-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;



    .item-time {
      font-size: 24rpx;
      color: #999;
    }


  }

}
</style>